<template>
  <div>
    <h3>当前count值：{{ this.$store.state.count }}</h3>
    <button v-on:click="addNumber">增加1</button>
    <button v-on:click="addNumberN">增加N</button>
    <button v-on:click="addNumberAsync">异步增加1</button>
    <button v-on:click="addNumberAsyncN">异步增加N</button>

    <h4>{{this.$store.getters.showCount}}</h4>
  </div>
</template>

<script>
export default {
  name: 'Addition',
  methods: {
    addNumber: function () {
      // commit 触发store中mutations中定义的函数 add
      this.$store.commit('add')
    },
    addNumberN: function () {
      this.$store.commit('addN', 2)
    },
    addNumberAsync: function () {
      this.$store.dispatch('addAsync')
    },
    addNumberAsyncN: function () {
      this.$store.dispatch('addAsyncN', 2)
    }
  }
}
</script>

<style scoped>

</style>
